import React, { Component } from 'react'
import comStyle from './TabProducts.module.css'
import { addAction, decAction } from '../../store/actions'
import store from '../../store'
import { AsyncGetDataAction } from '../../store/actions';
// import data from '../../data/data.json'
import { NavLink } from 'react-router-dom'

// console.log(goods.goods)
export default class TabProducts extends Component {
    state = { goods: [], cart: {}, focusPoint: 0, ballIndex: [1, 2, 3, 4, 5, 6], ball: 0 };
    componentDidMount() {
        store.subscribe(() => {
            let newcart = {}
            store.getState().cart.forEach(item => {
                newcart[item.title] = item.num;
            })
            this.setState({ cart: newcart });
        });
        (async () => {
            await store.dispatch(AsyncGetDataAction());
            // console.log(store.getState().data);
            this.setState({ goods: store.getState().data.goods });
            this.recordHeight();
        })();

        // console.log(store.getState().data)

    }
    // componentDidUpdate
    addFn = (name, price, e) => {
        if (!store.getState().cart.some(item => item.title === name)) {
            this.throwBall(e);
        }
        store.dispatch(addAction({ title: name, price }));
        // console.log(store.getState())


    }
    subFn = (name) => {
        store.dispatch(decAction({ title: name }));
        // console.log(store.getState())

    }
    focusOn = (key) => {
        // console.log(this.scrollArr[key],this.productContainer.scrollTop)
        this.productContainer.scrollTop = this.scrollArr[key];
        this.setState({ focusPoint: key })
    }
    recordHeight = () => {
        this.scrollArr = [];
        let height = 0;
        // console.log(this.productContainer)
        [...this.productContent.children].forEach(item => {
            this.scrollArr.push(height);
            height += item.scrollHeight;
        })
        // console.log(this.scrollArr)
    }
    scroll = () => {
        let key = this.scrollArr.findIndex(item => this.productContainer.scrollTop < item) - 1;
        // console.log(key)
        this.setState({ focusPoint: key })
    }
    throwBall = (e) => {
        let x = e.clientX;
        let y = e.clientY;
        let currentBall = this.balls.children[this.state.ball];
        let xx = x - currentBall.getBoundingClientRect().left;
        let yy = y - currentBall.getBoundingClientRect().top;
        // console.log(xx, yy)
        this.balls.children[this.state.ball].ontransitionend = () => {
            if (this.state.ball === this.state.ballIndex.length - 1) {
                console.log(this.state.ball);
                this.setState({ ball: 0 })
            } else {
                console.log(this.state.ball)
                this.setState({ ball: this.state.ball + 1 })
            }
            // currentBall.style.display = 'none';
            currentBall.style.transition = 'none';
            currentBall.firstElementChild.style.transition = 'none';
        }
        
        currentBall.style.transform = `translateX(${xx}px)`;
        currentBall.firstElementChild.style.transform = `translateY(${yy}px)`;
        // currentBall.style.display = 'block';
        setTimeout(() => {
            currentBall.style.transition = 'all 1s';
            currentBall.firstElementChild.style.transition = 'all 1s cubic-bezier(.2,-0.25,.64,.15)';
            currentBall.style.transform = `translateX(0px)`;
            currentBall.firstElementChild.style.transform = `translateY(0px)`;
        })
    }
    render() {
        return (
            <div className={comStyle.container}>
                <div className={comStyle.leftNavigation}>
                    <ul className={comStyle.navigationContent}>
                        {this.state.goods.map((item, key) => <li key={key} style={{ backgroundColor: this.state.focusPoint === key ? 'white' : '#f3f5f7' }} onClick={() => this.focusOn(key)}>
                            <div><span>{item.type === 2 && <img src={require("../../img/special_3@2x.png")} alt='' />}{item.name}</span></div>
                        </li>)}
                    </ul>
                </div>
                <div className={comStyle.productContainer} ref={ele => this.productContainer = ele} onScroll={this.scroll}>
                    <ul className={comStyle.productContent} ref={ele => this.productContent = ele} >
                        {
                            this.state.goods.map((item, key) => <li key={key}><p className={comStyle.title}>{item.name}</p>
                                <div className={comStyle.foodsContent}>
                                    <ul className={comStyle.foodsList}>
                                        {
                                            item.foods.map((item, k) => <li key={k}><NavLink to={`/productDetail?a=${key}&b=${k}`}><img src={item.image} alt='' /></NavLink>
                                                <div className={comStyle.foodinfo}>
                                                    <p className={comStyle.foodname}>{item.name}</p>
                                                    <p className={comStyle.description}>{item.description}</p>
                                                    <p className={comStyle.cellState}><span className={comStyle.sellCount}>月售{item.sellCount}份</span><span className={comStyle.rating}>好评率{item.rating}%</span></p>
                                                    <p className={comStyle.priceinfo}>
                                                        <span className={comStyle.price}><span>￥</span>{item.price}</span>
                                                        <span className={comStyle.oldPrice}>{item.oldPrice && '￥' + item.oldPrice}</span>
                                                        <span className={comStyle.orderCount}>
                                                            {this.state.cart[item.name] && <span className={comStyle.subBtn + ' iconfont icon-jianhao'} onClick={() => this.subFn(item.name)}></span>}
                                                            {this.state.cart[item.name] && <span className={comStyle.num}>{this.state.cart[item.name]}</span>}
                                                            <span className={comStyle.addBtn + ' iconfont icon-jiahao-'} onClick={(e) => this.addFn(item.name, item.price, e)} ></span>
                                                        </span>
                                                    </p>
                                                </div>
                                            </li>)
                                        }
                                    </ul>
                                </div>
                            </li>)
                        }
                    </ul>
                </div>
                <div ref={ele => this.balls = ele}>
                    {
                        this.state.ballIndex.map((item, key) => {
                            return <div className={comStyle.ballX} key={key}>
                                <div className={comStyle.ballY}></div>
                            </div>
                        })
                    }
                </div>


            </div>
        )
    }
}
